<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jq/jquery-3.2.0.min.js"></script>
    <style type="text/css">
.box{ width: 300px; height: 30px; margin: 10px auto}
.box1{ width: 300px; height: 200px; margin: 10px auto; background-color: blueviolet; padding: 15px;}
.box2{ width: 300px; height: 200px; margin: 10px auto; background-color: blue; padding: 15px;
display: none}
    </style>
</head>
<body>
        <div class="box">
            <input type="button" name="login1" value="登陆" class="dl1">
            <input type="button" name="register1" value="注册" class="zc1">
        </div>

        <div class="box1">
            账号：<input type="text" name="username" class="zh"><br><br><br>
            密码：<input type="password" name="password" class="mm"><br><br><br>
            <input type="button" name="login" value="登陆" class="dl">
        </div>

        <div class="box2">
            账号：<input type="text" name="username" class="zzh"><br><br><br>
            密码：<input type="password" name="password" class="zmm"><br><br><br>
            <input type="button" name="register" value="注册" class="zc">
        </div>
</body>
</html>
<script type="text/javascript">
    $('.dl1').bind('click',function () {$('.box1').show();$('.box2').hide();})
    $('.zc1').bind('click',function () {$('.box2').show();$('.box1').hide();})
    //注册
$('.zzh').bind('blur',function () {
    //注册账号输入框失去焦点的时候执行ajax
    $.ajax({
        url: "jq.php",
        type: "post",
        data: {username: $('.zzh').val()},
        dataType: "text",
        success: function (jie) {
            if (jie == '0') {
                alert('请输入4-9数字');
            } else if (jie == '1') {
                alert('账号已存在');
                $('.zzh').val("");
            } else if (jie == '2') {}
        }
    })
})
    $('.zmm').bind('blur',function () {
       //注册密码输入框失去焦点的时候执行ajax
        $.ajax({
            url:"jq1.php",
            type:"post",
            data:{password:$('.zmm').val()},
            dataType:"text",
            success:function (jie1) {
                if (jie1=='4'){alert('密码要大于三位数')}else{}
            }
        })
    })
    $('.zc').bind('click',function () {
        //点击注册按钮时候执行ajax
        $.ajax({
            url:"jq12.php",
            type:"post",
            data:{username:$('.zzh').val(),password:$('.zmm').val(),register:$('.zc').val()},
            dataType:"text",
            success:function (jie2) {
                if (jie2=='5'){
                    alert('注册成功')
                }else if(jie2=='6'){
                    alert('注册失败')
                }else if(jie2=='1'){
                    alert('账号已存在');
                    $zh=$('.zzh').val();
                    $zh="";
                }
            }
        })
    })

    //登录
    $('.dl').bind('click',function () {
        //点击登录按钮时候执行ajax
        $.ajax({
            url:"jq2.php",
            type:"post",
            data:{username:$('.zh').val(),password:$('.mm').val()},
            datatype:"text",
            success:function (shou) {
                if (shou=='0'){
                    alert('账号不存在')
                }else if(shou==1){
                    alert('登录成功')
                    window.location.href = "gongchang.php";
                }else if(shou==2){
                    alert('账号或密码不正确')
                }
            }
        })

    })
</script>